<template>
  <div class="user-info">
    <template v-if="$route.path == '/home/categorylist'">
      <el-row>
        <el-button type="primary" @click="handleaAdd">添加商品</el-button>
      </el-row>
      <el-table
        :data="categoryList"
        stripe
        style="width: 100%"
        row-key="id"
        :tree-props="{ hasChildren: 'hasChildren', children: 'children' }">
<!--        编号-->
        <el-table-column
          prop="id"
          label="商品编号"
          width="80">
        </el-table-column>
<!--        名称-->
        <el-table-column
          prop="catename"
          label="分类名称"
          width="120">
        </el-table-column>
<!--        图片-->
        <el-table-column
          label="图片">
          <template slot-scope="item" v-if="item.row.pid !== 0">
            <img :src="item.row.img" alt="" width="60" height="60" v-if="item.row.img">
          </template>
        </el-table-column>
<!--        状态-->
        <el-table-column
          prop="status"
          label="菜单状态">
          <template slot-scope="item">
            <el-switch
              :value="item.row.status"
              active-color="#f00"
              inactive-color="#eee"
              :active-value="1"
              :inactive-value="0">
            </el-switch>
          </template>
        </el-table-column>
        <!--      操作-->
        <el-table-column width="200" label="操作">
          <template slot-scope="item">
            <el-button type="success" icon="el-icon-edit" size="mini" @click="editItem(item.row.id)">修改</el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteItem(item.row.id,item.$index)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <el-row>
      <router-view></router-view>
    </el-row>
  </div>
</template>

<script>
  import {mapState, mapActions} from 'vuex'
  export default {
    name: "vUserInfo",
    mounted() {
      this.updatecategory()
    },
    computed: {
      ...mapState(['categoryList'])
    },

    data() {
      return {
        loading: true
      }
    },
    methods: {
      ...mapActions(['updatecategory']),
      //进入添加菜单页面
      handleaAdd() {
        this.$router.push('/home/categorylist/categoryadd')
      },
      //删除功能
      deleteItem(id, index) {
        this.$confirm('您正在删除菜单选项, 是否继续?', '提示', {
          cancelButtonText: '取消',
          confirmButtonText: '确定',
          type: 'warning'
        }).then(() => {
          this.axios({
            method: 'post',
            url: '/api/catedelete',
            data: {
              id: id
            }
          }).then(res => {
            this.updatecategory()
            this.$message({
              type: 'success',
              message: res.msg
            });
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //修改菜单信息功能
      editItem(id) {
        this.$router.push('/home/categorylist/categoryedit/' + id)
      }
    }
  }
</script>

<style scoped>

</style>
